<script setup>
import { defineProps, defineEmits, computed } from 'vue'

// 受控输入：v-model (modelValue) 双向绑定封装
const props = defineProps({
  modelValue: { type: String, default: '' }
})

const emit = defineEmits(['update:modelValue'])

const value = computed({
  get: () => props.modelValue,
  set: (val) => emit('update:modelValue', val)
})
</script>

<template>
  <div class="search-container">
    <input
      v-model="value"
      type="text"
      placeholder="搜索房间名称或ID..."
      class="search-input"
    />
  </div>
</template>

<style scoped>
.search-container { margin: 0; }

.search-input {
  width: 100%;
  height: 36px;
  padding: 0 12px;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  font-size: 13px;
  background: white;
  transition: border-color 0.2s;
}

.search-input:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
}

.search-input::placeholder { color: #9ca3af; }
</style> 